<template>
    <div class="listContainer">
        <van-nav-bar
            title="测试list"
            left-text="返回"
            right-text="按钮"
            left-arrow
        />
        <div class="listContent">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <div class="itemContent" v-for="item in list" :key="item" :title="item" >{{ item }}</div>
            </van-list>
        </div>
        
    </div>
</template>
<script>
export default {
    data(){
        return{
            loading:false,
            finished:false,
            list:[]
        }
    },
    mounted(){

    },
    methods:{
        onLoad() {
            console.log('eeee')
            // this.list=[1,2,3,4]

            // 加载状态结束
            this.loading = false;
            // this.list=[];
            let arr=[1,2,3,4,5]
            // let arr=[1,2,3]
            // 数据全部加载完成
            if (this.list.length >= 10 || arr.length<5) {
                // this.list=this.list.concat(arr);
                this.finished = true;
            }else{
                this.list=this.list.concat(arr);
                console.log('list',this.list)
            }
        },
    }
}
</script>
<style scoped>
.listContainer{
    background:#f1f1f1;
    min-height:100vh;
}
.listContent{
    padding:12px;
}
.itemContent{
    width:100%;
    height:80px;
    background:#fff;
    margin-bottom:15px;
    border-radius: 5px;
    text-align: center;
    line-height:80px;
}
</style>